<!DOCTYPE html>
<html lang="en">
<head>
    <meta property="og:title" content="Happy Island Designer" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://eugeneration.github.io/HappyIslandDesigner/" />
    <meta property="og:image" content="https://eugeneration.github.io/HappyIslandDesigner/thumbnail.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:description" content="Make your dream island map. Made for Animal Crossing: New Horizons" />

    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-159461234-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-159461234-1');
    </script>

    <link rel="icon" href="favicon.ico" type="image/x-icon" />

    <meta charset="utf-8">
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />
    <title>Happy Island Designer</title>
    <link rel="preload" href="font/TTNorms-Bold.woff" as="font" type="font/woff" crossorigin>
    <link rel="prefetch" href="font/TTNorms-Bold.woff" as="font" type="font/woff" crossorigin>
    <!-- font choice from: https://github.com/JoseDelPino/dodo_passboard -->
    <script type="text/javascript" src="lib/paper-full.js"></script>
    <script type="text/javascript" src="lib/paper-animate-browser.min.js"></script>
    <script type="text/javascript" src="lib/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="lib/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="lib/tinycolor-min.js"></script>
    <script type="text/javascript" src="lib/steganography.min.js"></script>
    <script type="text/javascript" src="lib/mitt.js"></script>
    <script type="text/javascript" src="data/template.js"></script>
    <script type="text/javascript" src="app/store.js"></script>
    <script type="text/paperscript" canvas="canvas" src="app/drawer.js"></script>
    <script type="text/paperscript" canvas="canvas" src="app/paper-zoom.js"></script>
    <style>
        html,
        body {
            margin: 0;
            height: 100%;
            overscroll-behavior: none;
        }

        /* Scale canvas with resize attribute to full size */
        canvas[resize] {
            width: 100%;
            height: 100%;
        }

        .menuBar {
            background-color: #fefae4; /* paper */
            position: fixed;
            top: 0;
            width: 100%;
            height: 60px;
            box-shadow: 0px 1px 5px rgb(0,0,0,.2);
        }

        .hidden {
            display: none;
        }

        .menuButton {
            position: fixed;
            top: 0;
            width: 100%;
            height: 60px;
            box-shadow: 0px 1px 5px rgb(0,0,0,.2);
        }

        .modal {
            position: fixed;
            top: 40;
            bottom: 100%;
            height: 60px;
            box-shadow: 0px 1px 5px rgb(0,0,0,.2);
        }

        @font-face {
            font-family: "TTNorms";
            src: url("font/TTNorms-Bold.woff") format('woff');
        }
    </style>
</head>
<body>
    <!-- browsers unload fonts that aren't used -->
    <div class="hidden">
        <p style="font-family: TTNorms">.</p>
    </div>
    <canvas id="canvas" resize></canvas>
</body>
</html>